<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <div id="root1"></div>
  <div id="root2"></div>
</body>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>

<script type="text/babel">
// 创建组件
class Person extends React.Component{
  // state = {
  //   name: 'tom',
  //   age: 18,
  //   sex: "女"
  // }
  // render(){
  //   return (
  //     <ul>
  //       <li>姓名：{this.props.name}</li>
  //       <li>性别：{this.props.sex}</li>
  //       <li>年龄：{this.props.age}</li>
  //     </ul>
  //   )
  // }
  
  render(){
    const {name, sex, age} = this.props
    return (
      <ul>
        <li>姓名：{name}</li>
        <li>性别：{sex}</li>
        <li>年龄：{age + 1}</li>
      </ul>
    )
  }
}

ReactDOM.render(<Person name = "tom" age="18" sex="女"/>, document.getElementById('root'))

// 数字型的传值
ReactDOM.render(<Person name = "jerry" age={19} sex="男"/>, document.getElementById('root1'))

// 语法糖的写法
const person = {name: 'adrianHwang', age: 40, sex: "男" }

// 对象拷贝
const person01 = {...person, name:"老黄"}

// 此处的 {...person}与结构赋值不是一个概念
ReactDOM.render(<Person {...person01} />, document.getElementById('root2'))
</script>
</html>
